<template>
  <div class="warrper">
    <swiper :options="swiperOption" >
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img class="swiper-img" :src='item.imgUrl' />
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name:'HomeSwiper',
  data() {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop:true,
        
      },
      
      swiperList:[{
        id:'001',
        imgUrl:'//mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/a31023dce497dfebeaced802008c6209.jpg'
      },{
        id:'002',
        imgUrl:'//mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20197/a685001bbf5e77a203ff8815e953efbe.jpg_945x288_52b6ec01.jpg'
      }]
    }
  },
}
</script>

<style lang='stylus' scoped>
  .warrper >>> .swiper-pagination-bullet-active
    background :pink;
  .warrper
    width :100%;
    overflow :hidden;
    height :0;
    padding-bottom :30.47%
    .swiper-img 
      width :100%;
      
</style>
